<template>
  <view>
    <view class="container">
      <view class="header">
        <view class="con_sear">
          <view class="back" @click="goBack"><uni-icons type="back" size="30" color="#ffb612"></uni-icons></view>
          <view class="search">
            <view><uni-icons type="search" size="30" color="#ffb612"></uni-icons></view>
            <view class="input">
              <uni-search-bar cancelButton="none" bgColor="rgb(51, 51, 51)" radius="30" clearButton="always" v-model="value" placeholder="请输入搜索内容"></uni-search-bar>
            </view>
            <view class="search-btn">搜索</view>
          </view>
        </view>
      </view>

      <view class="text_t">
        <view class="his">
          <view class="his_del">
            <h4 style="color: white;">历史搜索</h4>
            <view class="icon_del"><uni-icons type="trash" size="30" color="#fff" /></view>
          </view>
          <view class="txt">
            <text class="item" v-for="(i, index) in testData" :key="index">{{ i.name }}</text>
          </view>
        </view>
        <view class="his hot">
          <h4 style="color: white;">热门搜索</h4>
          <view class="txt">
            <text class="item" v-for="(i, index) in testData" :key="index">{{ i.name }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      testData: [
        {
          name: '压缩机'
        },

        {
          name: '自行式起重机'
        },
        {
          name: '推土机'
        },
        {
          name: '运输卡车'
        },
        {
          name: '运输卡车'
        }
      ]
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: rgb(51, 51, 51);
}
.container {
  // padding-top: 70rpx;
  .con_sear {
    display: flex;
    padding-top: 60rpx;
  }
  ::v-deep .header {
    color: #ffb612;
    display: flex;
    // justify-content: space-between;
    padding: 20rpx 10rpx;
    align-items: center;
    background-color: #4f4f4f;
    margin-bottom: 30rpx;
    border-bottom: 1px solid #ccc;
    .uni-input-input {
      color: #ffb612 !important;
    }
  }
  .back {
    padding-top: 25rpx;
    // margin-right: 10rpx;
    height: 30rpx;
  }
  .search {
    // border: 1px solid rgb(255,182,18);

    // border: 1px solid #bbbbbb;

    height: 80rpx;
    line-height: 50rpx;
    padding: 5px 10px;
    border-radius: 40rpx;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rpx;
    align-items: flex-end;

    ::v-deep .input {
      width: 350rpx;

      .uni-searchbar {
        padding: 0;
        // height: 40rpx;

        border-radius: 40rpx;
        color: rgb(255, 182, 18);
        .uni-searchbar__box {
          background-color: unset !important;
          .uni-searchbar__text-placeholder {
            color: #ffb612;
            text-align: start;
            justify-content: flex-start;
          }
        }
        .uni-searchbar__box-icon-search {
          display: none;
        }
      }
    }
    .search-btn {
      position: absolute;
      right: 14px;
      width: 140rpx;
      height: 70rpx;
      background-color: #4095e5;
      border-radius: 20rpx;
      line-height: 70rpx;
      text-align: center;
      margin-left: 40rpx;
      color: rgb(255, 182, 18);
      background-color: rgb(108, 108, 108);
    }
  }
  .text_t {
    padding: 0 20rpx;
    .his {
      margin-top: 20rpx;
      .his_del {
        display: flex;
        justify-content: space-between;
      }
      .txt {
        margin-top: 20rpx;
      }
    }
    .hot {
      margin-top: 160rpx;
    }
    .item {
      border: 1px solid #bbb;
      padding: 6rpx 12rpx;
      margin: 20rpx 26rpx;
      margin-left: 0;
      border-radius: 16rpx;
      display: inline-block;
      background-color: white;
    }
  }
}
</style>
